<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/elementUI.js"></script>
    <script src="js/axios.js"></script>
    <link rel="stylesheet" href="css/elementUI.css">
</head>
<body>
<div id="app">
    <h1>当前登陆的用户是：{{user==null?'无人登陆':user.roleName}}</h1>

    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="书名">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="作者">
            <el-input v-model="form.author"></el-input>
        </el-form-item>
        <el-form-item label="出版社">
            <el-input v-model="form.press"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="findPage()">查询</el-button>
            <el-button v-if="user.roleName=='管理员'" @click="handleAdd">添加</el-button>
            <el-button @click="toBorrow">借阅列表</el-button>
        </el-form-item>
    </el-form>

    <el-table
            :data="tableData"
            border
            style="width: 100%">

        <el-table-column
                prop="name"
                label="姓名">
        </el-table-column>
        <el-table-column
                prop="author"
                label="作者">
        </el-table-column>

        <el-table-column
                prop="press"
                label="出版社">
        </el-table-column>

        <el-table-column
                prop="num"
                label="借阅次数">
        </el-table-column>
        <el-table-column
                prop="status"
                label="当前借阅状态">
        </el-table-column>
        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-button @click="handleEdit(scope.row.id)" type="text" size="small">修改</el-button>
                <el-button type="text" size="small" @click="deleteOne(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 4, 6, 8]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog :title="添加图书" :visible.sync="dialogFormVisible">
        <el-form :model="pojo">
            <el-form-item label="书名" :label-width="formLabelWidth">
                <el-input v-model="pojo.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="作者" :label-width="formLabelWidth">
                <el-input v-model="pojo.author" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出版社" :label-width="formLabelWidth">
                <el-input v-model="pojo.press" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add()">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            tableData:[],
            pageNum:1,
            pageSize:2,
            total:0,
            user:{},
            form:{},
            dialogFormVisible:false,
            pojo:{},
            formLabelWidth:"120px"
        },
        methods:{
            toBorrow(){
                location.href="borrow.html";
            },
            add(){
                axios.post("/book/add",this.pojo).then(res=>{
                    this.dialogFormVisible=false;
                    this.findPage();
                })
            },
            handleAdd(){
                this.dialogFormVisible=true;
                this.pojo={};
            },
            findUser(){
                axios.get("/user/getUser").then(res=>{
                    this.user = res.data;
                })
            },
            findPage(){
                axios.post(`/book/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,this.form).then(res=>{
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                })
            },
            handleSizeChange(val){
                this.pageSize = val;
                this.findPage();
            },
            handleCurrentChange(val){
                this.pageNum=val;
                this.findPage();
            }
        },
        created(){
            this.findUser();
            this.findPage();
        }
    })
</script>
</body>
</html>